How to Add a Rental Component in Framer

In this tutorial, you will learn how to set up a car rental service in Bookla, add the open-source Rental component to a Framer website, connect it to Bookla, and test the booking flow.

Prerequisites

Before setting up the Rental component in Framer, make sure everything is configured correctly in the Bookla Platform.

Create a Company in Bookla

This step is essential because it links your Company ID to the Framer component.

• Open Bookla Platform and click "Create Account".
• Create an account using your credentials, or log in if you already have one.
• Create a new company or use an invitation code to access an existing one.

Set Up Resources

1. Go to your Bookla account.
2. Open the "Resources" section.
3. Click the "+ New Resource" button.
4. Enter a title for the resource. If needed, you can also change the resource color.
5. Click the "Create" button.

Creating a Service

1. Go to the "Services" section.
2. Click "+ New Service".
3. Enter a service name, for example, "Volvo XC60 rental".
4. Select the service type.

Note
For car rentals, choose "Flexible" because the duration of bookings can vary.

5. Select a booking interval.
6. Choose a booking policy:
   • Instant booking: The client instantly books the service without payment.
   • Needs confirmation: The booking requires your confirmation.
   • Needs prepayment: The client must prepay to confirm the booking.
7. Click "Create".

Connecting a Service to a Resource

1. Click "+ Link with Resource".
2. Select the resource or resources you want to use for the rental service.
3. Click "Link".

Configure the Currency and Tax Rate

1. Go to the "Pricing" section.
2. Click "Click to set" under Currency.
3. Select your preferred currency.
4. Click the "Save" button.
5. Click "Click to set" under Tax rate.
6. Enter your country's or state's required tax rate.
7. Choose whether the tax is included in the price.
8. Click the "Save" button.

Adding price rule for 1 hour rate

1. Click "+ Add price rule".
2. Set duration to 1 hour.
3. Set the price for a 1-hour rental.
4. Set priority.

Note
The higher the number, the higher the priority for the price rule.

5. Click "Create".

Adding price rule for 24 hour rate

1. Click "+ Add price rule".
2. Set duration to 168 hours.
3. Set the price for a 24 hour rental.
4. Set priority.
5. Click "Create".

Adding price rule for 1 week rate

1. Click "+ Add price rule".
2. Set duration to 168 hours.
3. Set the price for a 1-week rental.
4. Set priority.
5. Click "Create".

Open-Source Rental Component Integration

Bookla provides open-source booking components that you can use on your website. These components can be added to Framer projects as code components and customized to match your website.

You can edit and modify the components, or use them as a starting point for creating variations and adding new features with ChatGPT or another AI tool.

In this tutorial, you will use the Rental component.

Open-source Components

The component looks like this:

The client can select a date range, start time, and end time. This allows the client to choose both the pickup and drop-off times for the rental.

How to Use the Rental Component

1. Go to Open-source Components.
2. Find the Rental component.
3. Scroll down to "Component.tsx".
4. Click on "Component.tsx".
5. Copy the code.

6. Go to Framer.
7. Open the "Assets" section.
8. In the code section, click "+".
9. Click "New Code File".
10. Enter a title, for example, "BookingComponent".
11. Click "Create".

Note
By default, Framer creates an animated square as the code component.

12. Replace the default code with the copied Rental component code.

13. Go back to the page.
14. Select the container where you want to place the component.
15. Go to the "Assets" section.
16. Drag and drop the Rental component onto the page.
17. Adjust the component's width and height.
18. Customize the component as needed. For example, you can remove padding or change the selected color and button color.

How to Connect the Component to Bookla

After adding the Rental component to your Framer page, connect it to your Bookla account by adding the required API and service information.

1. Go to the Bookla section.
2. Check the API region in Bookla, US or EU.
3. Select the corresponding API region in the API Region field.
4. To copy and paste the API key:
   • Go to the Bookla Platform.
   • Go to the "Developers" section.
   • Click "Create API key".
   • Enter a name, for example, "Car rental key".
   • Select only the following client permissions: Client Service, Client Resource, and Guest Client.
   • Copy the API key.
   • Paste it into Framer at "API key".

Note
The API key is only available to copy once, so make sure to save it before closing the window.

5. To copy and paste the Company ID:

   • Go to the Bookla Platform.
   • Click on "Company".
   • Copy the ID at the top.
   • Paste it into Framer at "Company ID".

6. To copy and paste the Service ID:

   • Go to the Bookla Platform.
   • Go to the "Services" section.
   • Select the rental service.
   • Copy the Service ID.
   • Paste it into Framer at "Service ID".

Testing the Rental Component

Once the Rental component is connected to Bookla, test the complete booking flow to make sure everything works correctly.

1. Go to the page.
2. Select a rental period.

Note
The price changes automatically based on the selected period and the price rules configured in Bookla.

3. Select a start time and end time.
4. Click "Continue".
5. Enter the required data.
6. Click "Make booking".
7. The reservation is created, and you can also see it in the Bookla Platform.

Conclusion

Your Rental component is now connected to Bookla and ready to accept bookings from your Framer website.

You can further customize the component's appearance and settings to match your website and rental service requirements.